<template lang="html">
  <div id='example-3'>
    <lunbo></lunbo>
    <ul class="top-home__btn">
        <li>
            <a href="/male">
                <img class="top-home__icon" src="../assets/static/img/male.png">
                <p class="top-home__des">男生</p>
            </a>
        </li>
        <li>
            <a href="/female">
                <img class="top-home__icon" src="../assets/static/img/female.png">
                <p class="top-home__des">女生</p>
            </a>
        </li>
        <li>
            <a href="/category">
                <img class="top-home__icon" src="../assets/static/img/category.png">
                <p class="top-home__des">分类</p>
            </a>
        </li>
        <li>
            <a href="/rank">
                <img class="top-home__icon" src="../assets/static/img/rank.png">
                <p class="top-home__des">排行</p>
            </a>
        </li>
    </ul>
    <pagelists></pagelists>
  </div>
</template>

<script>
import lunbo from '@/components/lunbo.vue';
import pagelists from '@/components/pagelists';
export default {
  data(){
    return{
      name: "cding"
    }
  },
  methods:{

  },
  components:{
    lunbo,pagelists
  },
}
</script>

<style lang="css" scoped>
  .top-home__btn{
      margin: 0 0 4px;
      width:100%;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      flex-wrap: nowrap;
  }

  .top-home__btn li{
      flex-grow:0;
      font-size:12px;
  }

  .top-home__icon {
      display: block;
      height: 22px;
      width: 22px;
      margin: 0px auto;
  }
</style>
